<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>截图</title>
	<link rel="stylesheet" href="../css/test/photo.css">
</head>
<body>
	<div class="container">
		<ul class="list">
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
		</ul>
	</div>
	<a href="javascript:void(0);" class="prev-btn">左</a>
	<a href="javascript:void(0);" class="next-btn">右</a>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
		var $container = $('.container');
		var $list = $('.list');
		var $item = $('.item');
		var $prevBtn = $('.prev-btn');
		var $nextBtn = $('.next-btn');
		var curIndex = 0;
		var width = $container.width();

		function render() {
			$item.css({ width: width });
			$list.css({ width: width * $item.length })
		}

		$prevBtn.on('click', function () {
			if (curIndex === $item.length - 1) { 
				return;
			}
			var offset = curIndex * width;
			$list[0].style.transform = `translateX(${offset - width}px)`
			curIndex++;
		});

		$nextBtn.on('click', function () {
			if (curIndex === 0) { 
				return; 
			}
			var offset = curIndex * width;
			$list[0].style.transform = `translateX(${offset + width}px)`
			curIndex--;
		});		

		$(window).resize(function() {
			render();
		});
		render();
	})
</script>
</html>